<template>
  <div class="title">
    <span style="font-size: 20px; font-weight: light"
      >标题：{{ articletitle }}</span
    >
    <span style="font-size: 15px; font-weight: light; margin-left: 5%"
      >发布人id：{{ userid }}</span
    >
  </div>
  <div class="all">
    <div class="concrete">
      <div id="art-container" class="article">
      </div>

      <div class="right_sidebar">
        <span style="margin-left: 53%; margin-top: 1%; margin-right: 2%">
          <b>文章审核</b>
        </span>
        <a-button
          type="primary"
          ghost
          @click="setStatus(1)"
          style="margin-left: 53%; margin-top: 1%; margin-right: 2%"
        >
          通过
        </a-button>
        <a-button
          type="primary"
          danger
          ghost
          @click="setStatus(2)"
          style="margin-left: 53%; margin-top: 1%; margin-right: 2%"
        >
          拒绝
        </a-button>
        <a-checkbox-group v-model:value="tabIds"
          style="margin-left: 53%; margin-top: 10%; margin-right: 2%"
        >
          <span id="tab_title"><b>标签修改</b></span>
          <div v-for="t in tabs" :key="t.at_tab">
            <a-checkbox :value="t.at_tab">{{ t.at_name }}</a-checkbox>
          </div>
          <a-popconfirm title="确定要修改标签?" @confirm="set_tabs()" placement="left">
            <a-button type="primary">提交</a-button>
          </a-popconfirm>
      </a-checkbox-group>
      </div>
      
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { post, get, tip } from "@/common";
import { useRoute, useRouter } from "vue-router";

const router = useRouter(); //获取路由器
const route = useRoute(); //获取当前路由器
const jsonstr = decodeURIComponent(route.query.data);
const obj = JSON.parse(jsonstr);

const tabIds = ref([]);
const tabs = ref({});

const articleid = reactive({
  a_id: obj.a_id,
  a_status: obj.a_status,
});

console.log(articleid);

const userid = ref(obj.u_id);
const articletitle = ref(obj.a_title);
const articlecontent = ref(obj.a_html);


const get_tabs = ()=>{
  get("/buser/articlemanage/queryTabs?a_id=" + articleid.a_id).then((res) => {
    tabs.value = res.data;
    const temp = [];
    for (let i = 0; i < tabs.value.length; i++) {
      const tab = tabs.value[i];
      if (tabs.value[i].has) {
        temp.push(tabs.value[i].at_tab);
      }
    }
    tabIds.value = temp;
    
  initPage();
  });
};

const set_tabs = ()=>{
  const articleTabData = {
    a_id: articleid.a_id,
    at_list: tabIds.value,
  };

  post("/buser/articlemanage/setTab", articleTabData).then((res) => {
    tip.success("标签设置成功!");
  });
};


const setStatus = (status_code)=>{
  console.log(articleid);
  const articleData = {
    a_id: articleid.a_id,
    a_status: status_code,
  };

  console.log(articleData);

  post("/buser/articlemanage/setStatus", articleData).then((res)=>{
    tip.success("审核状态修改成功");
  });
};

const initPage = ()=>{
  var el = document.createElement("div");
  el.innerHTML = articlecontent.value;
  var elContainer = document.getElementById("art-container");
  elContainer.appendChild(el);
};

get_tabs();
</script>
<style>
.title {
  margin-left: 15%;
}
.concrete {
  width: 100%;
  height: 100%;
  margin-left: 15%;
  flex-direction: row;
  display: flex;
}
.right_sidebar{
  width: 100%;
  height: 100%;

}
.article {
  width: 53%;
  height: 100%;
  margin-right: 4%;
  margin-top: 1%;
  background-color: rgba(204, 204, 204, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px 1px;
}
</style>